<template>
<<<<<<< HEAD
  <div class="order">
    <div class="seek">
      <el-form label-width="80px" :model="axiopage" class="demo-form-inline">
        <div style="display: flex">
          <el-form-item label="订单编号:">
            <el-input v-model="axiopage.orderNumber" placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="下单时间:">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="time" type="datetimerange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="订单状态:">
            <el-select clearable v-model="axiopage.status" placeholder="请选择订单状态">
              <el-option label="待付款" :value="1"></el-option>
              <el-option label="待发货" :value="2"></el-option>
              <el-option label="待收货" :value="3"></el-option>
              <el-option label="待评价" :value="4"></el-option>
              <el-option label="成功" :value="5"></el-option>
              <el-option label="失败" :value="6"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="seek-button">
          <el-button type="primary" size="small" @click="search">查询</el-button>
          <el-button type="primary" size="small" @click="sendorder">导出待发货订单</el-button>
          <el-button type="primary" size="small" @click="send">导出销售记录</el-button>
          <el-button size="small" @click="clear">清空</el-button>
        </div>
      </el-form>
    </div>
    <div class="el-row" style="width: 100%; padding: 0 20px">
      <div class="el-col el-col-10">
        <span>商品</span>
      </div>
      <div class="el-col el-col-3">
        <span>成交单价/购买数量</span>
      </div>
      <div class="el-col el-col-3">
        <span>实付金额</span>
      </div>
      <div class="el-col el-col-3">
        <span>支付方式</span>
      </div>
      <div class="el-col el-col-3">
        <span>订单状态</span>
      </div>
      <div class="el-col el-col-2">
        <span>操作</span>
      </div>
    </div>
    <div class="pord" style="width: 100%; padding: 5px 15px">
      <h4 v-if="xs" style="
          text-align: center;
          margin: 20px 0;
          font-size: 16px;
          font-weight: 500;
        ">
        暂时还未有数据
      </h4>
      <div class="pord-content" v-for="item in list" :key="item.orderId">
        <div class="title">
          <p style="margin-right: 15px">订单编号：{{ item.orderNumber }}</p>
          <p>下单时间：{{ item.updateTime }}</p>
        </div>
        <div class="content" style="width: 100%; border: 1px solid #ebeef5">
          <div class="c-1">
            <div class="c-1-l" v-for="itm in item.orderItems" :key="itm.orderItemId">
              <div style="width: 100px; height: 100px">
                <img :src="img + itm.pic" alt="" style="width: 100px; height: 100px" />
              </div>
              <div style="margin-left: 20px;">
                <p class="p">{{ itm.prodName }}</p>
                <p>{{ itm.skuName }}</p>
              </div>
              <div class="c-1-r">
                <p>￥{{ itm.price }}</p>
                <p>x{{ itm.prodCount }}</p>
              </div>
            </div>
          </div>
          <div class="jf">
            <p>￥{{ item.actualTotal }}</p>
            <p>共{{ item.productNums }}件</p>
          </div>
          <div class="jf">
            <p v-if="item.isPayed == 1">微信支付</p>
            <p v-else>手动待付</p>
          </div>
          <div class="jf">
            <p v-if="item.status == 1">待付款</p>
            <p v-if="item.status == 2">待发货</p>
            <p v-if="item.status == 3">待收货</p>
            <p v-if="item.status == 4">待评价</p>
            <p v-if="item.status == 5">成功</p>
            <p v-if="item.status == 6">失败</p>
          </div>
          <div style="
              width: 190px;
              display: flex;
              justify-content: center;
              align-items: center;
            ">
            <p style="text-align: center" @click="look(item)">查看</p>
          </div>
        </div>
      </div>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 模态框 -->
    <el-dialog title="查看" :visible.sync="dialogVisible" width="80%">
      <div style="width: 100%; height: 100%;padding: 0 40px;" v-if="watch != ''">
        <p>订单编号：{{ watch.orderNumber }}</p>
        <el-steps :active="active" finish-status="success" process-status="wait" style="width: 80%;margin: 40px auto;">
          <el-step title="提交订单"></el-step>
          <el-step title="买家已付款" :description="watch.createTime"></el-step>
          <el-step title="卖家已发货"></el-step>
          <el-step title="买家已收货"></el-step>
        </el-steps>

        <div style="display: flex;align-items: center;" class="fk">
          <span>订单状态：</span>
          <p v-if="watch.status == 1">待付款</p>
          <p v-if="watch.status == 2">待发货</p>
          <p v-if="watch.status == 3">待收货</p>
          <p v-if="watch.status == 4">待评价</p>
          <p v-if="watch.status == 5">成功</p>
          <p v-if="watch.status == 6">失败</p>
          <button v-if="watch.status == 2" @click="fh">发货</button>
        </div>
        <!-- 描述列表 -->
        <div class="ms" style="display: flex;width: 100%;height: 306px;">
          <div style="width: 50%;">
            <div style="height: 50px;line-height: 50px;display: flex;align-items: center;">
              <img
                src=""
                alt="">买家付款后才可以发货
            </div>
            <div class="dz">
              <p>收货人：{{ watch.userAddrOrder.receiver }}</p>
              <p>手机号：{{ watch.userAddrOrder.mobile }}</p>
              <p>收货地址：{{ watch.userAddrOrder.province }}{{ watch.userAddrOrder.city }}{{ watch.userAddrOrder.area }}{{
                watch.userAddrOrder.addr }}</p>
              <p></p>
            </div>
          </div>
          <div style=" width: 50%;">
            <p>买家</p>
            <p>买家备注：{{ watch.userAddrOrder.postCode }}</p>
          </div>
        </div>
        <!-- 商品内容 -->
        <div class="shop">
          <div class="shoptitle">
            <p style="width: 727px;">商品</p>
            <p style="width: 180px;">单价</p>
            <p style="width: 180px;">数量</p>
            <p style="width: 180px;">总价</p>
          </div>
          <div class="shopcenter" v-for="itm in watch.orderItems" :key="itm.orderItemId">
            <div style="width: 727px;">
              <div style="width: 100px; height: 100px">
                <img :src="img + itm.pic" alt="" style="width: 100px; height: 100px" />
              </div>
              <div>{{ itm.prodName }}</div>
            </div>
            <div style="width: 180px;">{{ itm.price }}</div>
            <div style="width: 180px;">{{ itm.prodCount }}</div>
            <div style="width: 180px;">{{ itm.price }}</div>
          </div>
        </div>
        <div>商品总价：{{ watch.total }}</div>
        <div>应付金额：{{ watch.actualTotal }}</div>
        <div>
          <p>订单日志：</p>
          <p>{{ watch.createTime }}更新成功</p>
        </div>
      </div>
    </el-dialog>

    <!-- 收货地址  -->
    <el-dialog title="选择发货地址" :visible.sync="dialogFormVisible">
      <el-select v-model="value" placeholder="请选择发货地址">
        <div v-for="item in form" :key="item.dvyId">
          <el-option :label="item.dvyName" :value="item.dvyId"></el-option>
        </div>
      </el-select>
      <input v-model="value2"></input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </div>
    </el-dialog>
=======
  <div>
    1
>>>>>>> origin/netbook
  </div>
</template>

<script>
<<<<<<< HEAD
import * as XlSX from "xlsx";
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogVisible: false,
      input: "",
      value1: "",
      values: "",
      axiopage: {
        current: 1,
        size: 10,
        orderNumber: "",
        status: "",
        startTime: "",
        endTime: "",
      },
      list: [],
      total: 1,
      currentPage: 1,
      img: "http://admin.yami.byesame.com/apis/mall4j/img/",
      time: [],
      xs: false,
      watch: "",
      active: 1,
      form: {},
      value: '',
      value2: '',
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    ok() {
      // console.log(this.value, this.value2)
      if (this.value != '' && this.value2 != '') {
        this.$http({
          url: this.$http.adornUrl("/order/order/delivery"),
          method: "put",
          data: {
            dvyId: this.value,
            dvyFlowId: String(this.value2),
            orderNumber: String(this.watch.orderNumber)
          },
        }).then((r) => {
          console.log(r, "成功");
          if (r.code == "00000") {
            this.$message('卖家已发货');
            this.dialogFormVisible = false
            this.dialogVisible = false
            this.getlist()
          }

        });
      } else {
        this.$message('请输入内容');
      }

    },
    // 发货
    fh() {
      this.dialogFormVisible = true
      this.$http({
        url: this.$http.adornUrl("/admin/delivery/list"),
        method: "get",
        Headers: {
          "content-type":
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        },
      }).then((r) => {
        console.log(r, "订单");
        this.form = r.data
      });
    },
    // 导出订单
    sendorder() {
      this.$http({
        url: this.$http.adornUrl("/order/order/waitingConsignmentExcel"),
        method: "get",
        params: {
          consignmentName: '张三',
          consignmentMobile: 10086,
          consignmentAddr: '北京',
        },
        responseType: 'blob', // 设置响应类型为 blob
      }).then((response) => {
        // 创建一个 blob 对象
        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        // 创建一个 URL
        const url = window.URL.createObjectURL(blob);
        // 创建一个 a 标签
        const link = document.createElement('a');
        link.href = url;
        // 设置下载文件的名称
        link.setAttribute('download', '待发货信息整理.xlsx');
        // 将 a 标签添加到文档中
        document.body.appendChild(link);
        // 触发点击事件
        link.click();
        // 移除 a 标签
        document.body.removeChild(link);
        // 释放 URL 对象
        window.URL.revokeObjectURL(url);
      }).catch((error) => {
        console.error("导出失败:", error);
      });
    },
    // sendorder() {
    //   const work = XlSX.utils.json_to_sheet(this.list); //传入要导出的表格数据
    //   const workBook = XlSX.utils.book_new();
    //   XlSX.utils.book_append_sheet(workBook, work, "myList"); //myList自定义表明
    //   XlSX.writeFile(workBook, "one.xlsx"); //one.xlsx  文件名
    // },
    // 
    send() {
      this.$http({
        url: this.$http.adornUrl("/order/order/soldExcel"),
        method: "get",
        responseType: 'blob', // 设置响应类型为 blob
      }).then((response) => {
        // 创建一个 blob 对象
        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        // 创建一个 URL
        const url = window.URL.createObjectURL(blob);
        // 创建一个 a 标签
        const link = document.createElement('a');
        link.href = url;
        // 设置下载文件的名称
        link.setAttribute('download', '导出信息.xlsx');
        // 将 a 标签添加到文档中
        document.body.appendChild(link);
        // 触发点击事件
        link.click();
        // 移除 a 标签
        document.body.removeChild(link);
        // 释放 URL 对象
        window.URL.revokeObjectURL(url);
      }).catch((error) => {
        console.error("导出失败:", error);
      });
    },
    clear() {
      this.axiopage = {
        current: 1,
        size: 10,
        orderNumber: "",
        status: "",
        startTime: "",
        endTime: "",
      };
      this.time = null;
      this.getlist();
    },
    search() {
      this.getlist();
    },
    handleSizeChange(val) {
      this.axiopage.size = val;
      this.getlist();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.axiopage.current = val;
      this.getlist();
      console.log(`当前页: ${val}`);
    },
    look(v) {
      this.dialogVisible = true;
      this.watch = v;
      this.active = v.status;
      if (this.active == 1) {
        this.active = 0;
        this.watch.createTime = "";
      }
      console.log(v, "look");
    },
    getlist() {
      if (this.time != null) {
        this.axiopage.startTime = this.time[0];
        this.axiopage.endTime = this.time[1];
      } else {
        this.axiopage.startTime = "";
        this.axiopage.endTime = "";
      }
      // console.log(this.time);
      this.$http({
        url: this.$http.adornUrl("/order/order/page"),
        method: "get",
        params: this.axiopage,
      }).then((r) => {
        if (r.data.records.length == 0) {
          this.xs = true;
        }
        console.log(r, "getlist");
        this.list = r.data.records;
        this.total = r.data.total;
        console.log(this.list, 'list')
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.seek {
  margin-bottom: 50px;
}

.shopcenter {
  width: 100%;
  display: flex;
}

.shopcenter>div {
  display: flex;
  flex-direction: column;
}

.shoptitle {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}

.shoptitle>p {
  height: 49px;
  list-style: 49px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dddee1;
  box-sizing: border-box;
}

.shoptitle>p:nth-child(1) {
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
}

.shop {
  width: 100%;
}

.seek .el-input,
.seek .el-date-editor {
  margin-right: 15px;
}

form {
  // width: 100%;
  display: flex;
  flex-direction: column;
}

.seek-button {
  width: 50%;
  display: flex;
}

.el-row {
  margin-bottom: 10px;
}

.title {
  width: 100%;
  display: flex;
  padding: 0 10px;
  background: #f8f8f9;
  border-left: 1px solid #dddee1;
  border-top: 1px solid #dddee1;
  border-right: 1px solid #dddee1;
  box-sizing: border-box;
}

.content {
  width: 100%;
  display: flex;
}

.jf {
  width: 165px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #dddee1;
}

.c-1 {
  width: 670px;
  // height: 140px;
  display: flex;
  flex-direction: column;
  position: relative;
  border-right: 1px solid #dddee1;
  padding: 20px;
  box-sizing: border-box;
}

.c-1-l {
  width: 650px;
  // height: 140px;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  border-right: 1px solid #dddee1;
  padding: 20px;

}

.c-1>div {
  margin-right: 35px;
}

.c-1-r {
  position: absolute;
  top: 20px;
  right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}

.p {
  width: 400px;
  overflow: hidden;
}

.fk>p {
  height: 24px;
  padding: 0 8px;
  line-height: 22px;
  display: block;
  background-color: rgba(230, 162, 60, .1);
  border-color: rgba(230, 162, 60, .2);
  color: #e6a23c;
}
=======
export default {

}
</script>

<style>

>>>>>>> origin/netbook
</style>